import React from 'react'
import Menu from '@/views/Menu'
import '@/assets/css/CouponIndex.scoped.css'

const Component = () =>
{
    let busid = React.business.id ?? 0
    let [active, SetActive] = useState('all')
    let [coupon, SetCoupon] = useState([])
    let [page, SetPage] = useState(1)
    let [type, SetType] = useState(true)

    //选项卡切换
    const TabChange = async (key: string) => SetActive(key)

    const onRefresh = async () => 
    {
        SetPage(1)
        SetType(true)
        SetCoupon([])

        CouponList()
    }

    //获取优惠券列表
    const CouponList = async () =>
    {
        // console.log(busid)
        var result = await React.request.post('/coupon/CouponIndex', {
            page: page,
            busid: busid,
        })

        if(result.code == 0)
        {
            SetType(false)
            return false
        }

        SetPage(page + 1)
        SetType(true)
        SetCoupon(coupon.concat(result.data.list))

        console.log(result)   
    }


  return (
    <>
      {/* 选项卡切换 */}
      <React.UI.Tabs onChange={TabChange} activeKey={active} activeLineMode={'full'}>
        <React.UI.Tabs.Tab title="全部" key="all" />
        <React.UI.Tabs.Tab title="未使用" key="0" />
        <React.UI.Tabs.Tab title="已使用" key="1" />
      </React.UI.Tabs>

    <React.UI.PullToRefresh onRefresh={onRefresh}>
      <div className="coupon_list">
        {
            coupon.map((item,key) => (
                <div className="coupon_item">
                    <div className="item_content">
                        <Link to="/coupon/info">
                            <div className="left">
                                8<span>折</span>
                            </div>
                            <div className="right">
                                <div>新店优惠券</div>
                                <div>订单满<span>100元</span>打<span>8折</span></div>
                                <div>每人限领1张</div>
                                <div>领取后10天内有效</div>
                            </div>
                        </Link>
                    </div>
                    <div className="item_btn">
                    <React.UI.Button color='primary' fill='solid' size='mini'>立即使用</React.UI.Button>
                    </div>
        </div>
            ))
        }
      </div>
    </React.UI.PullToRefresh>

    <React.UI.InfiniteScroll loadMore={loadMore} hasMore={hasMore} threshold={0}/>




      <Menu />
    </>
  )
}

export default Component